<!DOCTYPE html>
<html lang="zh">

  <head>
    <meta charset="utf-8">
    <title>考试</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <style type="text/css">
      body {
        background-color: #fff;
      }

      .list {
        padding: 10px 10px;
        border: 1px solid #dcdcdc;
        border-radius: 6px;
        margin-top: 15px;
        background-color: #FFFFFF;
      }

      .list+.list {
        /* border-top: 1px solid #dcdcdc; */
      }

      .img {
        width: 7rem;
      }

      .img img {
        width: 7rem;
      }

      .tag-sm {
        padding: 2px 15px;
      }

      .bg-grey {
        background-color: #8799a3;
      }

      /* .title span{
        border-left: 3px solid #F29B76;
        padding-left: 4px;
      } */
      .list p {
        margin-bottom: 2px;
      }

      .label {
        border-left: 3px solid #DE722C;
        padding-left: 0.5rem;
      }

      .border-bottom {
        border-bottom: 1px solid #C1D9EF;
      }

      .btn {
        display: inline-block;
        padding: 0.15rem 1.2rem;
        font-size: 0.7rem;
        color: #1A4B82;
        border: 1px solid #1A4B82;
        border-radius: 3rem;
      }
      
    </style>
  </head>

  <body>
    <div id="container" v-cloak>
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">考试</h1>
      </header>

      <div id="refreshContainer" class="bg-white mui-content">
        <!-- <div class="mui-scroll"> -->
          <div class="padding-lr">
            <div class="list shadow" v-for="item in list" :key="item.id" @click="detail(item)">
              <!-- <div class="">
                <span class="text-blue text-sm label">培训课程</span>
              </div> -->
              <div class="padding-tb border-bottom">
                <p class="text-blue text-df text-cut">{{item.name}}</p>
                <div class="flex padding-top-sm">
                  <div class="text-grey text-sm padding-right">时长：{{item.duration}}分钟</div>
                  <div class="text-grey text-sm padding-right">总分：{{item.totalScore || 0}}分</div>
                  <div class="text-grey text-sm padding-right">及格分：{{item.passScore}}分</div>
                </div>
              </div>
              <div class="flex justify-between align-center padding-top-sm">
                <div><span class="btn" v-if="item.score!==null" @click.stop="resetExam(item.id)">重考</span></div>
                <div v-if="item.score!==null"><span class="text-blue text-lg">{{item.score}}</span>分</div>
                <div v-if="item.score==null" class="text-sm text-red"><span class="btn">参加考试</span></div>
              </div>
            </div>
            <div class="padding text-center" v-if="list.length===0"> 
              <p>暂无数据</p>
            </div>
          </div>
          <div class="padding-tb">
            
          </div>
        <!-- </div> -->
      </div>
    </div>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script src="../formal/js/api.js"></script>
    <script type="text/javascript">
      var htapi = new HTGlobal();
      var user = JSON.parse(localStorage.getItem('outUser'));//当前用户信息
      var exam = null;
      var size = 15;
      var page = 0;
      
      mui.plusReady(function() {
        load();
      })
      exam = new Vue({
        el: '#container',
        data: {
          list: []
        },
        methods:{
          detail(item){
            if(item.score!==null){
              mui.openWindow({
                url: './examDetail.html',
                id: './examDetail.html',
                extras: {
                  pageId: item.userPaperResultId
                }
              });
              return
            }
            mui.openWindow({
              url: './exam.html',
              id: './exam.html',
              extras: {
                pageId: item.id
              }
            });
          },
          resetExam(id){
            mui.openWindow({
              url: './exam.html',
              id: './exam.html',
              extras: {
                pageId: id
              }
            });
          }
        }
      })
      //页面加载
      function load(){
        htapi.fetch({
          projectId: user.currentProjectId,
          appUserId: user.id,
          // appUserId: '1660',
          // projectId: '26'
        }, function(data) {
          console.log('课程页面'+JSON.stringify(data))
          if(data.code=='0'){
            exam.list = exam.list.concat(data.data)
            
          }else{
			  mui.toast(data.msg)
		  }
          
        }, '加载中', 'exam')
      }
      window.addEventListener('examRefresh',function(event){
        console.log('刷新')
        exam.list=[]
      	load();	 
      });
    </script>
  </body>

</html>
